<template></template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';

const geometry = new THREE.BufferGeometry();

// 定义顶点位置
const vertices = new Float32Array([
  -10.0, -10.0,  0.0,
   10.0, -10.0,  0.0,
   10.0,  10.0,  0.0,
  -10.0,  10.0,  0.0
]);

// 定义UV坐标
const uvs = new Float32Array([
  1.0, 1.0, 
  0.0, 1.0,  
  0.0, 0.0, 
  1.0, 0.0, 
 
]);

// 定义索引
const indices = [0, 1, 2, 0, 2, 3];

// 设置几何体属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
geometry.setIndex(indices);

// 创建材质和网格
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./1.JPEG',e=>{
    renderer.render(scene,camera);
});
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(12,12);//注意选择合适的阵列数量
const material = new THREE.MeshBasicMaterial({ map: texture ,side:THREE.DoubleSide});
const mesh = new THREE.Mesh(geometry, material);


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(10,width/height,10,1000);
camera.position.set(200,200,200);
camera.lookAt(0,0,0);

const scene = new THREE.Scene();
scene.add(mesh);

const ambientLight = new THREE.AmbientLight(0xffffff,4);
scene.add(ambientLight);

const axesHelper = new THREE.AxesHelper(300);
scene.add(axesHelper);


const renderer = new THREE.WebGLRenderer({
     antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width,height);

document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change',e=>{
    renderer.render(scene,camera);
})




</script>